<!DOCTYPE html>
<html lang="ch" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V视界后台管理</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css" type="text/css" th:href="@{/static/iconfont/iconfont.css}">
    <link rel="stylesheet" href="../css/backstage.css" th:href="@{/static/css/backstage.css}">
    <link rel="stylesheet" href="../customAlertConfirm/customAlertConfirm.css" th:href="@{/static/customAlertConfirm/customAlertConfirm.css}">


</head>

<body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div class="outerBox">
    <div class="headerBox">
        <div class="logoBox">
            <img src="../img/logo.png" alt="logo" class="logo" th:src="@{/static/img/logo.png}">
        </div>
        <div class="titleBox">
            <h1>V视界后台管理</h1>
        </div>
        <div class="managerBox">
            <span>你好,<i th:text="${username}">username</i></span>
            <a th:href="@{/manager/managerLogout}" class="exit">退出</a>
        </div>
    </div>
    <div class="navBox">

        <ul class="navList userNav">
            <li class="navLi active">
                <i class="iconfont icon-geren">用户管理</i>
            </li>
            <a th:href="@{/manager/getHotSearchBlog}">
                <li class="navLi">
                    <i class="iconfont icon-bowenshu">博文管理</i>
                </li>
            </a>
            <a th:href="@{/blog/getAuditBlogList}">
                <li class="navLi">
                    <i class="iconfont icon-shenhe">博文审核</i>
                </li>
            </a>
            <a th:href="@{/manager/typeList}">
                <li class="navLi">
                    <i class="iconfont icon-leimupinleifenleileibie">类别管理</i>
                </li>
            </a>
            <a th:href="@{/manager/getReportForManager}" methods="post">
                <li class="navLi">
                    <i class="iconfont">&#xe6d6;举报处理</i>
                </li>
            </a>
        </ul>
    </div>
    <div class="opeBox">
        <ul class="opeList">
            <li class="opeLi show">
                <div class="userManage">
                    <h2 class="opeTitle">用户</h2>
                    <div class="seaAddBox">
                        <form class="seaUserForm forms" th:action="@{/user/userList}" method="get">
                            <input type="text" name="condition" id="userSea" placeholder="请输入用户昵称">
                            <button class="seaUserBtn">搜索</button>
                        </form>
                        <button class="addUserBtn">添加用户</button>
                    </div>
                    <div class="tableBox">
                        <table class="userTable infoTable">
                            <thead>
                            <tr>
                                <th>昵称</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>状态</th>
                                <th>所在地</th>
                                <th>注册时间</th>
                                <th>邮箱地址</th>
                                <th>权限</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:if="${pageBean.rows}==0">
                                暂无数据
                            </tr>
                            <tr th:each="users:${pageBean.rows}">
                                <td th:text="${users.username}"></td>
                                <td th:text="${users.sex}"></td>
                                <td th:text="${users.age}"></td>
                                <td th:switch="${users.ban}">
                                    <p th:case=0>正常</p>
                                    <p th:case=1>禁言</p>
                                </td>
                                <td th:text="${users.address}"></td>
                                <td th:text="${users.entryDate}"></td>
                                <td th:text="${users.email}"></td>
                                <td th:switch="${users.isManager}">
                                    <p th:case=0>用户</p>
                                    <p th:case=1>管理员</p>
                                </td>

                                <td>
                                    <a class="delUserBtn" th:attr="data-userid=${users.id}">删除</a>
                                    <a class="banUserBtn" th:if="${users.ban==0}" th:attr="data-userid=${users.id}">禁言</a>
                                    <a class="cancelBanBtn" th:if="${users.ban==1}" th:attr="data-userid=${users.id}">解禁</a>
                                    <a class="changeInfoBtn" th:attr="data-userid=${users.id}">修改</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="pageBox userPage">
                        <div>
                            <button class="userPrePage"><</button>
                            <button class="showUserPage showPage" style="width: 35px;cursor: inherit;">0</button>
                            <button class="userNextPage">></button>
                        </div>
                        <div class="showUserTotalPage showTotalPage">共0页</div>
                        <div>
                            <form class="userPageForm pageForm" th:action="@{/user/userList}" method="get">
                                到第<input type="number" name="pageNo" class="userPageNo"  step="any">页
                                <button>跳转</button>
                            </form>
                            <form class="hiddenUserPageForm hidden" th:action="@{/user/userList}" method="get">
                                <input type="number" name="pageNo" class="hiddenUserPageNo">
                            </form>
                        </div>
                        <script type="text/javascript" th:inline="javascript">

                            let totalNumber = [[${pageBean.total}]]
                            let totalPage = Math.ceil(totalNumber / 10)
                            const userPrePage = document.querySelector('.userPrePage')
                            const userNextPage = document.querySelector('.userNextPage')
                            const showUserPage=document.querySelector('.showUserPage')
                            const showUserTotalPage=document.querySelector('.showUserTotalPage')
                            const hiddenUserPageForm=document.querySelector('.hiddenUserPageForm')
                            const userPageForm = document.querySelector('.userPageForm')
                            // 若直接将pagecount设置为1，则因为表单提交时的网页刷新导致pagecount重新变回1，所以要将其以会话储存的方式保存
                            var userPageCount = sessionStorage.getItem('userPageCount') || 1

                            showUserPage.innerHTML = `${userPageCount}`
                            showUserTotalPage.innerHTML = `共${totalPage}页`
                            //分别为上一页、下一页添加点击事件
                            userPrePage.addEventListener('click', () => {
                                // 判断页码数大小，小于等于1则返回，并提示信息
                                if (userPageCount <= 1) {
                                    showCustomAlert('当前已是第一页', false)
                                    return
                                }
                                // 若没问题则对userPageCount--，调用方法重新渲染用户信息
                                userPageCount--
                                updatePageNumber()
                            })

                            userNextPage.addEventListener('click', () => {
                                // 大于等于最大页码数时，返回，提示信息
                                if (userPageCount >= totalPage) {
                                    showCustomAlert('当前已是最后一页', false)
                                    return
                                }
                                // 否侧进行++，调用方法
                                userPageCount++
                                updatePageNumber()
                            })
                            function updatePageNumber() {
                                // 将userPageCount储存在会话储存中，防止页面刷新导致pagecount丢失
                                sessionStorage.setItem('userPageCount', userPageCount)
                                hiddenUserPageForm.pageNo.value = userPageCount
                                hiddenUserPageForm.submit()
                            }
                            userPageForm.addEventListener('submit',(e)=>{
                                e.preventDefault()
                                if(userPageForm.pageNo.value<=0||userPageForm.pageNo.value>totalPage||!(userPageForm.pageNo.value%1 === 0)){
                                    showCustomAlert('输入的页码数有误，请重新输入',false)
                                    userPageForm.reset()
                                }else{
                                    userPageCount=userPageForm.pageNo.value
                                    sessionStorage.setItem('userPageCount', userPageCount)
                                    userPageForm.submit()
                                }
                            })
                        </script>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<!--添加用户信息-->
<div class="addUserBox hidden">
    <div class="addUserContent">
        <form class="addUserForm" th:action="@{/user/addUser}" method="post">
            <p>添加用户</p>
            <div class="form-group">
                <div class="labelBox">
                    <label for="addUserName">
                        昵称：
                    </label>
                </div>
                <input type="text" name="username" class="form-control" id="addUserName"
                       placeholder="请输入昵称" autocomplete="new-password"/>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <label for="addSex">
                        性别：
                    </label>
                </div>
                <select type="text" name="sex" class="form-control" id="addSex">
                    <option>男</option>
                    <option>女</option>
                </select>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <label for="addAge">
                        年龄：
                    </label>
                </div>
                <input type="number" name="age" class="form-control" id="addAge"
                       placeholder="请输入年龄" autocomplete="new-password" step="any"/>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <label for="addAddress">
                        地址：
                    </label>
                </div>
                <input type="text" name="address" class="form-control" id="addAddress"
                       placeholder="请输入地址" autocomplete="new-password"/>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <i>*</i>
                    <label for="addEmail">
                        邮箱：
                    </label>
                </div>
                <input type="text" name="email" class="form-control" id="addEmail"
                       placeholder="请输入邮箱" autocomplete="new-password"/>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <i>*</i>
                    <label for="addpwd">
                        密码：
                    </label>
                </div>
                <input type="password" name="password" class="form-control" id="addpwd"
                       placeholder="请输入密码" autocomplete="new-password"/>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <label for="isManager">
                        权限：
                    </label>
                </div>
                <select type="text"class="form-control" name="manager" id="isManager">
                    <option value="0">普通用户</option>
                    <option value="1">管理员</option>
                </select>
            </div>
            <button type="submit" class="addBtn">确定</button>
            <button type="button" class="cancelAdd">取消</button>
            <div class="cancelBtn">&times;</div>
        </form>
    </div>
</div>
<!--添加用户信息-->
<!--修改用户信息-->
<div class="changeUserBox hidden">
    <div class="changeUserContent">
        <form class="changeUserForm">
            <p>修改用户信息</p>
            <div class="form-group">
                <div class="labelBox">
                    <label for="changeUserName">
                        昵称：
                    </label>
                </div>
                <input type="text" name="username" class="form-control" id="changeUserName"
                       placeholder="请输入昵称" autocomplete="new-password"/>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <label for="changeSex">
                        性别：
                    </label>
                </div>
                <select type="text" name="sex" class="form-control" id="changeSex">
                    <option>男</option>
                    <option>女</option>
                </select>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <label for="changeAge">
                        年龄：
                    </label>
                </div>
                <input type="number" name="age" class="form-control" id="changeAge"
                       placeholder="请输入年龄" autocomplete="new-password" step="any"/>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <label for="changeAddress">
                        地址：
                    </label>
                </div>
                <input type="text" name="address" class="form-control" id="changeAddress"
                       placeholder="请输入地址" autocomplete="new-password"/>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <label for="changeEmail">
                        邮箱：
                    </label>
                </div>
                <input type="text" name="email" class="form-control" id="changeEmail"
                       placeholder="请输入邮箱" autocomplete="new-password"/>
            </div>

            <div class="form-group">
                <div class="labelBox">
                    <label for="changeisManager">
                        权限：
                    </label>
                </div>
                <select type="text"class="form-control" name="manager" id="changeisManager">
                    <option value="0">普通用户</option>
                    <option value="1">管理员</option>
                </select>
            </div>
            <button type="submit" class="changeBtn">确定</button>
            <button type="button" class="cancelChange">取消</button>
            <div class="cancelChangeBtn">&times;</div>
        </form>
    </div>
</div>
<!--修改用户信息-->
</body>

<script src="../../static/customAlertConfirm/customAlertConfirm.js" th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"></script>
<script src="../../static/js/backstage.js" th:src="@{/static/js/backstage.js}"></script>
<script th:inline="javascript">
    // showCustomAlert('登录成功',true)
</script>
</html>